<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            padding-top:100px;
            background-color:pink;
            margin:100px;
            text-align:center;
            font:18px/30px "simsun";
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="box">
    鼠标在盒子中的X坐标为：100px;<br>
    鼠标在盒子中的Y坐标为：100px;<br>
</div>
<script>
    function scroll(){
        //简单版
        return{
            "top":window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,
            "left":window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft
        };

    }
    //鼠标进入盒子中之后只要移动，哪怕1像素，随时更换里面的内容（鼠标在盒子里坐标）
    var div=document.getElementsByTagName("div")[0];
    div.onmousemove=function(event){
        event=event||window.event;
        var pagex=event.pageX||scroll().left+event.clientX;
        var pagey=event.pageY||scroll().top+event.clientY;
        var xx=div.offsetLeft;
        var yy=div.offsetTop;
        var targetx=pagex-xx;
        var targety=pagey-yy;
        this.innerHTML="鼠标在盒子中的X坐标为："+addZ(targetx)+"px;"+"<br>"+"鼠标在盒子中的Y坐标为："+addZ(targety)+"px;"+"<br>";
    }
    function addZ(num){
        if(num<100&&num>10){
            num="0"+num;
        }else if(num<10){
            num="00"+num;
        }else{
            num=num+"";
        }
        return num;
    }
</script>
</body>
</html>